<template>
  <view class="car-container">
		<image class="bg-logo" src="@/static/image/logo_bg.png" />
    <view class="topbar" :style="topbarStyle">
      <view class="topbar-returnBtn" @click="handleReturnPage">
        <up-icon name="arrow-left" color="white" size="24"></up-icon>
        <text class="topbar-returnBtn-text">返回</text>
      </view>
      <view class="topbar-title">爱车</view>
    </view>
    <view class="main" :style="mainStyle">
      <view class="main-car" v-if="currentCar">
        <!-- 基本信息 -->
        <view class="main-car-info">
          <view class="add-btn" @click="handleAddCar">
            <up-icon name="close-circle" size="32" color="#f8f8f8" />
          </view>
          <image v-if="currentCar.brandModel === '凯迪拉克'" class="main-car-info-logo" src="@/static/image/cadilac_logo.png" mode="aspectFit" />
          <image v-else class="main-car-info-logo" src="@/static/image/andi_logo.png" mode="aspectFit" />
          <view class="main-car-info-license-plate">{{ `${currentCar.licensePlate.slice(0, 2)}:${currentCar.licensePlate.slice(2)}` }}</view>
          <view class="main-car-info-register-date">注册日期：{{ currentCar.registerTime }}</view>
          <view class="main-car-info-status">
            <up-tag v-if="currentCar.exemptStatus === 1" text="免上线年检" size="mini" plain plainFill />
            <up-tag v-if="currentCar.exemptStatus === 0 && currentCar.checkStatus === 0" text="年检超期" size="mini" type="error" plain plainFill />
            <up-tag v-if="currentCar.exemptStatus === 0 && currentCar.checkStatus === 1" text="已年检" size="mini" plain plainFill />
          </view>
        </view>
        <!-- 车辆模型图片 -->
        <view class="main-car-model">
          <up-swiper :list="carModelImgList" :current="currentIndex" :autoplay="false" indicator acceleration bgColor="#ffffff00" height="200" imgMode="aspectFit" @change="handleSwiperChange" />
        </view>
      </view>
      <!-- 功能按键 -->
      <view class="main-btn">
				<navigator v-for="(item, index) in funcList" :key="index" class="main-btn-item" hover-class="none" :url="item.url">
					<image mode="aspectFit" class="main-btn-item-icon" :src="item.icon"></image>
					<text class="main-btn-item-text">{{ item.label }}</text>
				</navigator>
      </view>
    </view>
    <navigator v-if="currentCar" class="bottom-btn" hover-class="none" :url="`/pages/addCar/addCar?carId=${currentCar.id}`">编辑车辆</navigator>
  </view>
</template>

<script setup>
  import API from '@/api';
  import { ref, reactive, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
	import car_check from '@/static/image/service/car_check.png'
	import car_breakRule from '@/static/image/service/car_breakRule.png'
	import car_order from '@/static/image/service/car_order.png'
	import car_search from '@/static/image/service/car_search.png'
	import car_money from '@/static/image/service/car_money.png'
	import car_insurance from '@/static/image/service/car_insurance.png'
  import car_cadilac from '@/static/image/cadilac.png'
  import car_audi from '@/static/image/audi_a4l.png'

  const { globalData } = getApp();
  const topbarStyle = `height: ${globalData.navBarHeight}px; margin-top: ${globalData.statusBarHeight}px`;
  const mainStyle = `margin-top: ${globalData.navBarHeight + globalData.statusBarHeight + 12}px; height: calc(100vh - ${globalData.navBarHeight + globalData.statusBarHeight + 12 + 75}px)`;

  onLoad(async options => {
    await getCarList();
    if (options.carId) {
      currentIndex.value = list.value.findIndex(item => item.id === options.carId);
    }else {
      currentIndex.value = 0
        console.log('carModelImgList', carModelImgList.value);
    }
  })

  uni.$on('showNewCar', newCarId => {
    getDetail(newCarId)
  })


  const list = ref([]);
  const currentIndex = ref(0);
  const currentCar = computed(() => list.value[currentIndex.value])
  const carModelImgList = computed(() => list.value.map(item => item.brandModel === '凯迪拉克' ? car_cadilac : car_audi))

	const funcList = reactive([
		{
		  label: '车辆年检',
		  icon: car_check,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '违章查缴',
		  icon: car_breakRule,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '罚单缴费',
		  icon: car_order,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '车况查询',
		  icon: car_search,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '车辆估值',
		  icon: car_money,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '车险购买',
		  icon: car_insurance,
		  url: '/pages/index?indexPageActive=1'
		},

    {
		  label: '车辆年检',
		  icon: car_check,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '违章查缴',
		  icon: car_breakRule,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '罚单缴费',
		  icon: car_order,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '车况查询',
		  icon: car_search,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '车辆估值',
		  icon: car_money,
		  url: '/pages/index?indexPageActive=1'
		},
		{
		  label: '车险购买',
		  icon: car_insurance,
		  url: '/pages/index?indexPageActive=1'
		}
	])

  const handleAddCar = () => {
    uni.navigateTo({
      url: '/pages/addCar/addCar?fromPage=car'
    })
  }

  const handleSwiperChange = e => {
    currentIndex.value = e.current;
  }

  // const getDetail = async id => {
  //   const res = await API.car.detail(id);
  //   currentCar.value = res.data;
  //   console.log('getDetail', res.data);
  // }

  const getCarList = async () => {
    const res = await API.car.getAll();
    const nonZeroItems = res.data.filter(item => item.id !== '0');
    const zeroItemId = res.data.find(item => item.id === '0');
    list.value = nonZeroItems.concat(zeroItemId);
  }

  const handleReturnPage = () => {
    uni.navigateBack();
  };
</script>

<style lang="scss">
  .car-container {
    overflow: auto;
    height: calc(100vh - 70px);
    // border: 1px solid;
    // background: linear-gradient(to bottom, #0055a5 0, #f7f7f7 520rpx);
    background: linear-gradient(to bottom, #0055a5 0, #aad0ff 45%, #f7f7f7 60%);
    // background-image: linear-gradient(to bottom, #0055a5, #326bb6, #5081c7, #6b98d8, #86b0e9, #9cbdf0, #b1caf6, #c5d8fd, #d6dffb, #e3e6fa, #eeeef8, #f7f7f7);

		.bg-logo {
		  position: absolute;
		  top: -3%;
		  width: 680rpx;
		  height: 600rpx;
		  right: 0;
		}

    .topbar {
      color: white;
      z-index: 1;
      position: absolute;
      width: 100%;
      box-sizing: border-box;
      padding: 0 12px;
      @include flex-row(flex-start, center);

      &-returnBtn {
        @include flex-row(flex-start, center);

        &-text {
          margin-left: 4px;
          font-size: 14px;
        }
      }

      &-title {
        // font-size: 18px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .main {
      padding: 12px;
      position: relative;
      box-sizing: border-box;
      // @include flex-column(space-between, center);

      &-car {
        width: 100%;
        &-info {
        position: relative;

        .add-btn {
          position: absolute;
          right: 0;
          top: 0;
          transform: rotateZ(45deg);
        }

        &-logo {
          max-height: 30px;
          max-width: 100px;
          margin-bottom: 6px;
        }

        &-license-plate {
          font-weight: bold;
          font-size: 26px;
          margin-bottom: 6px;
        }

        &-register-date {
          margin-top: 6px;
          font-size: 14px;
          font-weight: bold;
        }

        &-status {
          margin-top: 6px;
          width: fit-content;
        }
      }

      &-model {
        margin: 12px 0;
        // width: 100%;
        // @include flex-row(center, center);

        // &-img {
        //   width: 80%;
        // }
      }
      }

      &-btn {
        width: 100%;
        max-height: 540rpx;
        overflow: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(100px, 1fr));
        gap: 30rpx;
				// transform: translateY(-40rpx);

        &-item {
					@include card;
					@include flex-row(flex-start, center);
          height: 80px;
					margin: 0;
					
					&-text {
						font-size: 15px;
						font-weight: bold;
						margin-left: 12px;
					}
					
					&-icon {
						@include size(56px);
					}
        }
				
				.u-slot-title {
					padding: 16px;
					border-bottom: 1px solid #efefef;
				}
      }
    }

    .bottom-btn {
        @include bottom-btn;
      }
  }
</style>
